<template>
	<swiper class="swiper" :options="swiperOption">
		<swiper-slide v-for="item of datas.recommend" :key="item.goodsId">
			<van-image :src="filterImageUrl(item.image)"/>
			<p class="text">{{item.goodsName}}</p>
			<p class="price">{{item.mallPrice | toFixed | rmb}}({{item.price | toFixed | rmb}})</p>
		</swiper-slide>
		<div class="swiper-pagination" slot="pagination"></div>
	</swiper>
</template>

<script>
	export default {
		props: {
			datas: {
				type: Object
			}
		},
		data() {
			return {
				swiperOption: {
					slidesPerView: 3,
					spaceBetween: 30,
					pagination: {
						el: '.swiper-pagination',
						clickable: true
					}
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.text,.price{
		font-size: 12px;
		text-align: center;
	}
</style>
